<template>
  <div v-if='isChild' :class='{"update-data": !noIconForCol && (isUpdate || isAddNode(data.id))}' class='del-con' @click='showDel'>
    <span class='text'>{{showVal}} </span>
    <span v-if='delNum > 1' class='icon-num'>{{delNum}}</span>
    <a-icon v-if='isChild && delNum == 0' type="form" class='del-click'/>
  </div>
</template>
<script>
import mix from '../js/mainTable'
export default {
  mixins:[mix],
  computed: {
    showVal() {
      return (this.data[this.word] == undefined || this.data[this.word].length == 0) ? 
        '' : this.data[this.word][0].deliverableName
    },
    delNum() {
      return this.data[this.word] == undefined ? 0 : this.data[this.word].length
    }
  },
  methods: {
    showDel() {
      if (this.columnInfo.edit && this.isChild && 
        (this.data['lock.locked'] == undefined || !this.data['lock.locked'])) {
        this.$emit("showDeliver",this.data)
      }
    }
  }
}
</script>
<style scoped>
.edit-content {
    width: 100%;
}
.icon-num {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: #ccc;
  color: #fff;
  border-radius: 10px;
  text-align: center;
  font-size: 12px;
  line-height: 15px;
  margin-left: 10px;
}
.del-con {
  min-height: 21px;
  padding-right: 20px;
}
.text {
  display:inline-block;
  vertical-align: middle;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.del-click {
  display: none;
  color: #999;
  margin-left: 10px;
  cursor: pointer;
}
.del-con:hover .del-click {
  display: inline-block
}
</style>